<template>
  <div class="home-serviceStaff">
    <van-nav-bar>
      <span slot="left"
        ><van-icon name="manager" color="#979191" size="18" />
        诚信注册家服员</span
      >
    </van-nav-bar>
    <!-- 服务人员列表 -->
    <van-card
      :key="item.id"
      :class="delborder(index)"
      :thumb="item.pic"
      v-for="(item, index) in StaffList"
      @click="cutStaff(item.id)"
    >
      <template #title>
        <div class="title_r">
          <span>{{ item.name }}</span
          ><span style="float: right; color: #979191">{{ item.salary }}</span>
        </div>
      </template>
      <template #tags>
        <van-tag
          plain
          type="primary"
          v-for="(list, index) in item.tag"
          :key="index"
          >{{ list }}</van-tag
        >
        <!-- <van-tag plain type="primary">6年经验</van-tag> -->
      </template>
      <template #price>
        <div>
          <p>
            {{ item.detail[0] }} | {{ item.detail[1] }} | {{ item.detail[2] }} |
            {{ item.detail[3] }}
          </p>
        </div>
      </template>
    </van-card>
    <p @click="$router.push('/staff')">
      更多家服员<van-icon name="arrow" color="#979191" size="14" />
    </p>
  </div>
</template>

<script>
export default {
  name: 'ServiceStaff',
  props: {
    StaffList: {
      type: Array,
      require: true,
    },
  },
  methods: {
    delborder(index) {
      if (this.StaffList.length - 1 === index) {
        return 'delborder'
      }
    },
    cutStaff(id) {
      this.$router.push({
        path: `/staff/${id}`,
      })
    },
  },
}
</script>

<style scoped lang="less">
// 家政服务人员
.home-serviceStaff {
  background-color: #fff;
  .van-nav-bar__content {
    height: 90px;
    border-bottom: 1px solid #f0eeee;
    .van-nav-bar__left {
      span {
        font-size: 20px;
        font-weight: 600;
        .van-icon {
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
  }
  .van-card {
    padding-bottom: 30px;
    background-color: #fff;
    border-bottom: 1px solid #f0eeee;
    .van-card__header {
      .van-card__content {
        .title_r {
          margin-bottom: 22px;
          span {
            font-size: 20px;
            font-weight: 600;
          }
        }
        .van-tag--plain {
          display: inline-block;
          width: 130px;
          height: 46px;
          border: 1px solid #3f51b5;
          border-radius: 25px;
          text-align: center;
          line-height: 46px;
          color: #3f51b5;
          font-size: 14px;
          margin-right: 8px;
        }
        .van-card__bottom {
          p {
            font-size: 17px;
            color: #979191;
          }
        }
      }
    }
  }
  p {
    font-size: 20px;
    color: #979191;
    text-align: center;
    font-weight: 500;
  }
}
.delborder {
  border: 0 !important;
}
</style>
